<template>
    <div class="content" id="preview-content" @drop="drop" @dragover="allowDrop">
        <div 
          v-draggable 
          v-resizeable="'box'+item.uuid"
          v-rightclick="item.uuid"
          ref="dragRef" 
          class="box"
          :class="activeCompoentId == index?'boder-style-active': 'boder-style'"
          :id="'box'+item.uuid" 
          @click.stop="clickDragHanlder(item,index)" 
          v-for="(item,index) in components"
          :key="item.uuid" 
          :style="{
            top:`${item.top}px`,
            left:`${item.left}px`,
            width:`${item.width}px`,
            height:`${item.height}px`,
            'z-index':`${item.zIndex}`,
          }" 
          @rightClickDeleteHanlder="rightClickDeleteHanlder"
          @rightClickCopyHanlder="rightClickCopyHanlder"
          @rightClickChangeHierarchyHanlder="rightClickChangeHierarchyHanlder"
          @resize="resizeHandler"

        >
          <component :is="allCompoents[item.dom]" :uuid="item.uuid"></component>
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue'
import { v4 as uuidv4 } from 'uuid';
import allCompoents from '@/utils/GlobalImportant.js';
const components = ref([])
const activeCompoentId = ref()
const activeCompoentWidth = ref(0)
const activeCompoentHeight = ref(0)
const activeCompoentOffsetX = ref(0)
const activeCompoentOffsetY = ref(0)

// 右键点击删除事件上抛的事件
const rightClickDeleteHanlder = (e)=> {
  let newComponents = components.value.filter(item=>{
    return item.uuid != e
  })
  components.value = newComponents
}
// 右键点击复制事件上抛的事件
const rightClickCopyHanlder = (e)=> {
  let newComponents = JSON.parse(JSON.stringify(components.value.filter(item=>{
    return item.uuid == e
  })[0]))
  newComponents.left += 20
  newComponents.top += 20
  newComponents.uuid = uuidv4()
  components.value.push(newComponents)
}
// 右键点击上移 下移 置顶 置底
const rightClickChangeHierarchyHanlder = (e, type)=> {
  console.log(e, type)
  components.value.forEach(item=> {
    if(e == item.uuid){
      switch(type){
        case 'up':
          item.zIndex++
          break
        case 'down':
          item.zIndex = item.zIndex>0?item.zIndex-1:0
          break
        case 'upBest':
          item.zIndex = components.value.length+1
          break
        case 'downBest':
          item.zIndex = 0
          break
      }
      console.log(item)
    }
  })
}
// resize函数 在这里接受鼠标移动值与类型  并且改变大小
const resizeHandler = (option)=> {
  switch(option&&option.type){
      case 'right':
        components.value[activeCompoentId.value].width = Number(activeCompoentWidth.value - option.diffX)
        break
      case 'rightBottom':
        components.value[activeCompoentId.value].width = Number(activeCompoentWidth.value - option.diffX)
        components.value[activeCompoentId.value].height = Number(activeCompoentHeight.value - option.diffY)
        break
      case 'bottom':
        components.value[activeCompoentId.value].height = Number(activeCompoentHeight.value - option.diffY)
        break
      case 'leftBottom':
        components.value[activeCompoentId.value].width = Number(activeCompoentWidth.value + option.diffX)
        components.value[activeCompoentId.value].height = Number(activeCompoentHeight.value - option.diffY)
        components.value[activeCompoentId.value].left = Number(activeCompoentOffsetX.value - option.diffX)
        break
      case 'left':
        components.value[activeCompoentId.value].width = Number(activeCompoentWidth.value + option.diffX)
        components.value[activeCompoentId.value].left = Number(activeCompoentOffsetX.value - option.diffX)
        break
      case 'leftTop':
        components.value[activeCompoentId.value].width = Number(activeCompoentWidth.value + option.diffX)
        components.value[activeCompoentId.value].height = Number(activeCompoentHeight.value + option.diffY)
        components.value[activeCompoentId.value].left = Number(activeCompoentOffsetX.value - option.diffX)
        components.value[activeCompoentId.value].top = Number(activeCompoentOffsetY.value - option.diffY)
        break
      case 'top':
        components.value[activeCompoentId.value].height = Number(activeCompoentHeight.value + option.diffY)
        components.value[activeCompoentId.value].top = Number(activeCompoentOffsetY.value - option.diffY)
        break
      case 'rightTop':
        components.value[activeCompoentId.value].width = Number(activeCompoentWidth.value - option.diffX)
        components.value[activeCompoentId.value].height = Number(activeCompoentHeight.value + option.diffY)
        components.value[activeCompoentId.value].top = Number(activeCompoentOffsetY.value - option.diffY)
        break
  } 
}
// 选中当前要拖到的组件
const clickDragHanlder = (item, index)=> {
  console.log(index)
  let activeCompoent = JSON.parse(JSON.stringify(item))
  // 将选择的组件存储 在其他地方会用到
  sessionStorage.setItem('activeCompoent',JSON.stringify(item))
  activeCompoentId.value = index
  // 获取当前元素的初始位置  拖动改变大小需要使用原始值
  activeCompoentWidth.value = activeCompoent.width
  activeCompoentHeight.value = activeCompoent.height
  activeCompoentOffsetX.value = activeCompoent.left
  activeCompoentOffsetY.value = activeCompoent.top
}

const drop = (ev) => {
	ev.preventDefault();
	let data=ev.dataTransfer.getData("compoentId");
  let obj = {
    // dom位置信息
    left: ev.offsetX,
    top: ev.offsetY,
    // dom高宽信息
    width: 200,
    height: 200,
    zIndex: components.value.length+1,
    // uuid信息
    uuid: uuidv4(),
    // 组件信息
    dom: data
  }
  // 在右侧预览框添加组件
  components.value.push(obj)
}
const allowDrop = (ev) =>{
	ev.preventDefault();
}
</script>
<style lang="scss" scoped>
.content{
    width: 400px;
    height: 400px;
    border: 1px solid red;
    position: relative;
    overflow: hidden;
  }
  .box{
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    overflow: hidden;
    // z-index: 2;
  }
  .button2 {
      position: absolute;
      bottom: 10px;
      left: calc(50% + 10px);
  }
  .button1 {
      position: absolute;
      bottom: 10px;
      left: calc(50% - 100px);
  }
  .boder-style{
    border: 2px solid transparent;
  }
  .boder-style-active{
    border: 2px solid white;
  }
</style>
